Cara Membuat Text Area beserta Variasinya

Text Area merupakan suatu area yang berbentuk kotak, yang apabila sobat masukkan beberapa kata/kalimat dan melebihi kapasitas dari kotak tersebut, kotak tersebut memilikki fungsi scroll agar meminimalisasi supaya teks tidak memakan tempat. Text Area juga sangat berguna untuk peng-copy pastean teks karena beberapa website mematikan fungsi copy-pastean atau fungsi klik kanannya sehingga sobat tidak bisa melakukan Copy Paste.

Pada kesempatan ini ghifar akan memberikan tiga variasi dari text area yang bisa sobat pilih.

A. Text Area Sederhana

<textarea rows="6" cols="35">isi dengan kalimat, kata, kode yang diinginkan</textarea>

Dengan kode di atas maka text area tersebut memilikki jumlah baris 6 dan lebar form text area 35. Sobat bisa ubah kembali jumlah baris dan lebar form text area tersebut sesuai dengan kebutuhan sobat. Jadinya akan seperti ini.

diisi dengan kalimat, kata, kode yang diinginkan

B. Text Area dengan fungsi Copy All / Select all

<div>

<form name="copy">

<div align="center">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>

<div align="center">

</div>

<div align="center">

<textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">Berikut ini adalah cara membuat teks area dengan fungsi copy all / select all atau cara klik copy all</textarea></div>

</form>

</div>

Kode di atas merupakan kode untuk membuat fungsi Copy All / Select All. Jadinya seperti ini.

Berikut ini adalah cara membuat teks area dengan copy / select all atau cara klik copy all

• Untuk tulisan yang berwarna Biru ganti dengan nama perintah yang sobat suka. Misalnya ganti dengan perintah Select All, Tambahkan, dll.

• Untuk tulisan yang berwarna Merah ganti dengan kalimat, kata, kode yang diinginkan.

C. Text Area dengan fungsi Scroll

<div style="overflow:auto; width:80%px; height:50px; padding:10px; border:2px solid #f4f4f4; background-color:#f2f2f2"> 

Cara membuat text area dengan fungsi scroll / tombol gulir

</div>

Jadinya akan seperti ini.

Cara membuat text area dengan fungsi scroll / tombol gulir

Sobat tinggal rubah ukuran, kode warna, dan teks yang akan sobat tampilkan sesuai kebutuhan.

Cara memasukkan kode HTML ini dengan mengklik tombol HTML pada saat sobat menulis artikel (Bukan Edit HTML untuk Template ya!!!).

Demikian Cara Membuat Text Area beserta Variasinya. Bagaimana? Sobat bisa memilih diantara ketiga Text Area tersebut. Silahkan dicoba.

Read More

Cara Membuat Kotak Komentar Facebook di Blog

Untuk blogger biasanya akan ada kotak komentar yang tidak bisa diisi oleh akun facebook sobat, nah ghifar akan memberikan trik Cara Membuat Kotak Komentar Facebook di Blog.

Caranya cukup mudah, berikut langkah2x nya:

1. Login terlebih dahulu ke Account Blogger
2. (Untuk Antarmuka Lawas) klik Rancangan -> Edit HTML (jangan lupa beri centang pada kotak expand widget template)
(Untuk Antarmuka yang Diperbaharui) pilih Template -> Edit HTML -> lalu pilih Lanjutkan (jangan lupa beri centang pada kotak expand widget template)
3. Setelah terbuka kotak Edit HTML, carilah kode berikut:
<b:includable id='status-message'> (tekan Ctrl + F atau F3 pada keyboard untuk memudahkan pencarian). Bila sudah ketemu sobat akan menemukan kode </b:includable> di atas kode tadi.
4. Copy Paste kode di bawah ini di atas kode </b:includable> :

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>

5. Langkah Terakhir Save Template Sobat dan tutup kotak Edit HTML nya.

Semoga berhasil.

Read More

Cara Memasang Burung Twitter Terbang di Blogspot

Cara membuat/memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot.

Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Sekarang, mari kita bersama-sama bagaimana cara memasang widget ini:

• Pertama-tama silahkan login di Blogger
• Klik Design -> Page Element > Add Gadget -> HTML/Javascript
• Copy paste kode di bawah ini ke kolom HTML/Javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc057sXiSQ0ai5EfRnq-Y_51mxuGHItDeQO9uc3UJqtRmfJ-1yDpF7ukYcgjnto8jKLWK9fe6gWl53qOP7BBpPqiFzHtIPLDmg4kA0YBeJHbT9ZYkrJ8k3pGnfTTtUEC1C3WWdsvxMNX0/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan akun Twitter sobat
• Simpan dan lihat hasilnya

Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan.

Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9fXgXMs6DTNQWIfb1faT6ql3vem01A5_CB9Jys6MBw_OfKhlQgPFQTqn7QJBnwn6dC8DG8yGhyphenhyphenVUL9qbIpLL1CSVIaLms55L8XXmd7TobEyL8DU7GmmDoVZ9CdLUgk679O72ARiQlVhs/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjIu6ph8q-hdY2iglcrhyphenhyphenT5uQVeRzqiCtFG7IoeQRe3P22RhGkX5gpeFAEPIIUNZjcnnIzcKF-aC8RZQ1mBKMm0FqcpkBoi_FpvxvJ-usoPaaIAr9b_V9PVoeO8AsyUB1z8jJ1HfIxIU/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9k8srewvK_3379P3hBxsvEWbf6RvRWA4AlN-rZ-vhsY0tQmH-ajiG34Hk_r0y8lk3Q1JrGJE5fsJVrNnceh2yfsNGWi9h69lO_59gEaW8jrS0Xk3LSvsLWS92sS-Soe8znEV5hIb0lk/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxV-nZdQuQN1gbLFG0FHzKkuqWBHpv_MM7IO8lNkS8S0dTN-OPcS6Ess44w3iuyWl0Nrpr9ykOs7K8hiWPnX8UMlD4sQHBG52xAbZv3t0YaukLY4CTuwfUIH-JH-ARRSwVw_8t2d9_mK4/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiII9cPBaOkiXojuP3ZUfI945o_vl1HgyN0oc70bB7QYDZc6mlKr8Y75UQQlAxEA8kuGNegpb1FAvtHb1U0HNqJWPvC_Ankgrg1m4qA4Fe1JgvfTZGpTtVa9gCOVNuK2wyrotK15np_BW0/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-ud8mEauMvyCm6mO4EIqQNAxueLAVgKqLMpHJrX9sPtJPncHVKjg0dQTFvqLsByIfikQKdIyGJiciAZgOumYjMDYxoflGkkhvKekjU3BGT49PX_7b8ytNX687QUNXMxeTjDLn7pKqSM/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmGTbFq_8kC_-OJfB1JeG5HiDMRO9zFha_uVOgSJMn2LlCJqOLSA9fAs0yrrox1HXEzHvrQPa75keSf5qtsXNotekugatnO82nug2r1I6PssDxpSA5AhYzqPwaXpb_VPSU0jUfSWk1qg/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GdtnEQsRtWQxYmouZ0YiEauCHI8wpfkLrbEAcCrz_7-qrTSa46-ka4lN-PJeegAm38e0L4datuKYjiwz1B5KRJQLWXjzzGb_5PeL-o7AR9UyArA4GzND3lyojHXFet7KqiioV0u-KVM/s1600/red+bird.png

Untuk memasukkan nama Akun Twitter anda, hapus dan ganti tulisan yang diberi warna biru.

Dan terakhir jangan lupa disimpan. Atur posisi gadget/widget Burung Twitter anda.

Berikut tampilan Beranda blog's ghifar saat selesai dipasang Burung Twitter:

Semoga berhasil sob !!!

Read More